import React, { useState, useEffect } from 'react';
import { Card, Statistic, Tabs, Divider, Spin, Button, DatePicker, Select, Space } from 'antd';
import ReactECharts from 'echarts-for-react';
import { InfoCircleOutlined, CalendarOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
import styles from './dataVisualization.module.css';
import { 
  getTodayTotalRequests, 
  getTotalAgents, 
  getRequestStatsByTime,
  getDashboardStats,
  getSystemResources,
  getAgentUsageStats,
  MonitorStatsDto,
  SystemResourcesDto,
  TimeStats,
  AgentUsageStatsDto
} from '@/apis/backhub/monitor';
import ChatLogModal from './components/ChatLogModal';
import WeekPicker from './module/WeekPicker';
import dayjs from 'dayjs';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

dayjs.extend(weekOfYear);
dayjs.locale('zh-cn');

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const DataVisualization: React.FC = () => {
  // 状态管理
  const [loading, setLoading] = useState<boolean>(true);
  const [chartLoading, setChartLoading] = useState<boolean>(false);
  const [todayRequests, setTodayRequests] = useState<number>(0);
  const [totalAgents, setTotalAgents] = useState<number>(0);
  const [timeStats, setTimeStats] = useState<TimeStats[]>([]);
  const [failTab, setFailTab] = useState<'day' | 'week' | 'month'>('day');
  const [failureCount, setFailureCount] = useState<number>(0);
  const [agentUsageStats, setAgentUsageStats] = useState<AgentUsageStatsDto[]>([]);
  const [dashboardStats, setDashboardStats] = useState<MonitorStatsDto>({
    totalUsers: 0,
    totalAgents: 0,
    totalApiCalls: 0,
    totalConversations: 0,
    totalAlerts: 0,
    totalErrors: 0
  });
  const [systemResources, setSystemResources] = useState<SystemResourcesDto>({
    cpuUsage: 0,
    memoryUsage: 0,
    usedStorage: 0,
    totalStorage: 0,
    uptimeMinutes: 0,
    formattedUptime: ''
  });
  const [chatLogModalVisible, setChatLogModalVisible] = useState(false);
  const [selectedTimeRange, setSelectedTimeRange] = useState<[string, string]>(['', '']);
  const [selectedStatus, setSelectedStatus] = useState<number | undefined>();
  const [selectedDate, setSelectedDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
  const [selectedWeek, setSelectedWeek] = useState<string>('');
  const [selectedMonth, setSelectedMonth] = useState<string>(dayjs().format('YYYY-MM'));
  const [selectedYear, setSelectedYear] = useState<string>(dayjs().format('YYYY'));

  // 服务器资源监控数据
  const resourceData = [
    { name: 'CPU使用率', value: systemResources.cpuUsage, color: '#13c2c2' },
    { name: '内存使用率', value: systemResources.memoryUsage, color: '#40a9ff' },
    { name: '系统存储', value: Math.round(systemResources.usedStorage / systemResources.totalStorage * 100) || 0, color: '#52c41a' },
    { name: '文件存储', value: 0, color: '#faad14', notConnected: true },
  ];

  // 初始化时加载数据
  useEffect(() => {
    fetchDashboardData();
    // 设置默认周日期
    const now = dayjs();
    // 按照每7天为一周来计算
    // 1-7号为第1周，8-14号为第2周，以此类推
    const currentWeek = Math.ceil(now.date() / 7);
    setSelectedWeek(`${now.year()}-${now.month() + 1}-${currentWeek}`);
  }, []);

  // 当标签页变化时重新获取数据
  useEffect(() => {
    fetchTimeStats();
  }, [failTab, selectedDate, selectedWeek, selectedMonth]);

  // 获取总体数据
  const fetchDashboardData = async () => {
    setLoading(true);
    try {
      // 并行获取数据
      const [todayRequestsData, totalAgentsData, dashboardData, systemResourcesData, agentUsageData] = await Promise.all([
        getTodayTotalRequests(),
        getTotalAgents(),
        getDashboardStats(),
        getSystemResources(),
        getAgentUsageStats()
      ]);
      
      setTodayRequests(todayRequestsData);
      setTotalAgents(totalAgentsData);
      setDashboardStats(dashboardData);
      setSystemResources(systemResourcesData);
      setAgentUsageStats(agentUsageData);
      
      // 获取时间统计数据
      await fetchTimeStats();
    } catch (error) {
      console.error('获取仪表盘数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 获取时间统计数据
  const fetchTimeStats = async () => {
    setChartLoading(true);
    try {
      let timeParam = '';
      switch (failTab) {
        case 'day':
          timeParam = selectedDate;
          break;
        case 'week':
          timeParam = selectedWeek;
          break;
        case 'month':
          timeParam = selectedMonth;
          break;
      }
      
      const statsData = await getRequestStatsByTime(failTab, timeParam);
      
      if (statsData.timeStats) {
        setTimeStats(statsData.timeStats);
        
        // 计算总数（包括成功、失败和告警）
        const totalCount = statsData.timeStats.reduce(
          (sum, item) => sum + item.successCount + item.failureCount + (item.alertCount || 0), 0
        );
        setFailureCount(totalCount);
      }
    } catch (error) {
      console.error('获取时间统计数据失败:', error);
    } finally {
      setChartLoading(false);
    }
  };

  // 计算智能体使用百分比
  const calculateAgentPercentages = () => {
    if (!agentUsageStats.length) return [];
    
    // 计算使用次数总和
    const totalUsage = agentUsageStats.reduce((sum, agent) => sum + (agent.usageCount || 0), 0);
    
    // 计算每个智能体的占比
    return agentUsageStats.slice(0, 6).map(agent => ({
      name: agent.agentName || '未命名智能体',
      value: agent.usageCount || 0,
      percent: totalUsage ? Math.round((agent.usageCount || 0) / totalUsage * 100) : 0
    }));
  };

  // 格式化时间标签
  const formatTimeLabel = (timeSlot: string) => {
    if (failTab === 'day') {
      // 如果是按日查询，只保留时分
      const match = timeSlot.match(/\d{2}:\d{2}/);
      return match ? match[0] : timeSlot;
    }
    return timeSlot;
  };

  // 根据时间统计数据生成用户智能平台峰值图表选项
  const getUserPeakOption = () => {
    // 从时间统计数据中提取数据用于图表
    const timeSlots = timeStats.map(item => formatTimeLabel(item.timeSlot));
    const successData = timeStats.map(item => item.successCount);
    
    return {
      xAxis: {
        type: 'category',
        data: timeSlots,
        boundaryGap: false,
        axisLabel: {
          interval: 'auto',
          rotate: 30,
          margin: 12
        }
      },
      yAxis: {
        type: 'value',
        splitLine: { lineStyle: { type: 'dashed' } },
        axisLabel: {
          margin: 16
        }
      },
      grid: { left: 45, right: 20, top: 40, bottom: 40 },
      series: [
        {
          data: successData,
          type: 'line',
          areaStyle: { color: 'rgba(24,144,255,0.15)' },
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: { color: '#1890ff', width: 2 },
          itemStyle: { color: '#1890ff' },
        },
      ],
    };
  };

  // 处理服务请求统计点击
  const handleFailureCountClick = () => {
    let startTime, endTime;
    
    switch (failTab) {
      case 'day':
        // 使用选择的日期
        const selectedDay = dayjs(selectedDate);
        startTime = selectedDay.startOf('day').format('YYYY-MM-DD HH:mm:ss');
        endTime = selectedDay.endOf('day').format('YYYY-MM-DD HH:mm:ss');
        break;
      case 'week':
        // 解析选择的周信息
        const [year, month, week] = selectedWeek.split('-').map(Number);
        const weekStart = dayjs().year(year).month(month - 1).startOf('month')
          .add(week - 1, 'week');
        startTime = weekStart.startOf('day').format('YYYY-MM-DD HH:mm:ss');
        endTime = weekStart.add(6, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
        break;
      case 'month':
        // 使用选择的月份
        const [year2, month2] = selectedMonth.split('-').map(Number);
        const monthStart = dayjs().year(year2).month(month2 - 1);
        startTime = monthStart.startOf('month').format('YYYY-MM-DD HH:mm:ss');
        endTime = monthStart.endOf('month').format('YYYY-MM-DD HH:mm:ss');
        break;
    }

    setSelectedTimeRange([startTime, endTime]);
    // 不设置状态值，这样会查询全部状态的数据
    setSelectedStatus(undefined);
    setChatLogModalVisible(true);
  };

  // 处理总错误数点击
  const handleTotalErrorsClick = () => {
    // 不设置时间范围，查询全部失败记录
    setSelectedTimeRange(['', '']);
    setSelectedStatus(0); // 失败状态
    setChatLogModalVisible(true);
  };

  // 处理标签页切换
  const handleTabChange = (value: 'day' | 'week' | 'month') => {
    setFailTab(value);
    // 如果切换到周视图，确保有默认值
    if (value === 'week' && !selectedWeek) {
      const now = dayjs();
      // 按照每7天为一周来计算
      // 1-7号为第1周，8-14号为第2周，以此类推
      const currentWeek = Math.ceil(now.date() / 7);
      setSelectedWeek(`${now.year()}-${now.month() + 1}-${currentWeek}`);
    }
  };

  // 处理周选择变化
  const handleWeekChange = (value: string) => {
    setSelectedWeek(value);
  };

  // 处理图表点击事件
  const handleChartClick = (params: any) => {
    if (params.componentType === 'series') {
      const timeSlot = params.name;
      const status = params.seriesName === '正常' ? 1 : params.seriesName === '告警' ? 2 : 0;
      
      try {
        let startTime, endTime;
        const now = dayjs();
        
        if (failTab === 'day') {
          // 如果是按日查询，使用当前日期加上时间槽
          const [hours, minutes] = timeSlot.split(':');
          startTime = now.hour(parseInt(hours)).minute(parseInt(minutes)).second(0).format('YYYY-MM-DD HH:mm:ss');
          endTime = now.hour(parseInt(hours)).minute(parseInt(minutes)).add(1, 'hour').second(0).format('YYYY-MM-DD HH:mm:ss');
        } else if (failTab === 'week' || failTab === 'month') {
          // 如果是按周或月查询，时间槽已经是完整的日期格式 "YYYY-MM-DD"
          const targetDate = dayjs(timeSlot);
          if (!targetDate.isValid()) {
            console.error('Invalid date:', timeSlot);
            return;
          }
          // 设置为当天的开始和结束时间
          startTime = targetDate.startOf('day').format('YYYY-MM-DD HH:mm:ss');
          endTime = targetDate.endOf('day').format('YYYY-MM-DD HH:mm:ss');
        }

        setSelectedTimeRange([startTime, endTime]);
        setSelectedStatus(status);
        setChatLogModalVisible(true);
      } catch (error) {
        console.error('Error processing time slot:', error);
      }
    }
  };

  // 修改图表配置，添加点击事件
  const modelOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: { 
      data: ['正常', '告警', '错误'], 
      top: 10,
      textStyle: { fontSize: 12 },
      itemWidth: 12,
      itemHeight: 12
    },
    xAxis: {
      type: 'category',
      data: timeStats.map(item => formatTimeLabel(item.timeSlot)),
      axisLabel: {
        interval: failTab === 'month' ? 0 : 'auto',
        rotate: failTab === 'month' ? 45 : 30,
        margin: 12,
        fontSize: 11
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: { 
      type: 'value',
      axisLabel: {
        margin: 16,
        fontSize: 11
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          opacity: 0.6
        }
      }
    },
    grid: { left: 45, right: 20, top: 50, bottom: failTab === 'month' ? 60 : 45 },
    series: [
      {
        name: '正常',
        type: 'bar',
        barGap: '40%',
        barCategoryGap: failTab === 'month' ? '60%' : '40%',
        data: timeStats.map(item => item.successCount),
        itemStyle: { 
          color: '#52c41a',
          borderRadius: [3, 3, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#6eda3d'
          },
          focus: 'series'
        },
        barWidth: failTab === 'month' ? 6 : 8,
      },
      {
        name: '告警',
        type: 'bar',
        data: timeStats.map(item => item.alertCount || 0),
        itemStyle: { 
          color: '#faad14',
          borderRadius: [3, 3, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#ffc53d'
          },
          focus: 'series'
        },
        barWidth: failTab === 'month' ? 6 : 8,
      },
      {
        name: '错误',
        type: 'bar',
        data: timeStats.map(item => item.failureCount),
        itemStyle: { 
          color: '#ff4d4f',
          borderRadius: [3, 3, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#ff7875'
          },
          focus: 'series'
        },
        barWidth: failTab === 'month' ? 6 : 8,
      }
    ],
  };

  // 使用渠道分析（环形图）- 由于API中没有对应字段，保留静态数据
  const channelOption = {
    tooltip: { 
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: { 
      orient: 'vertical', 
      right: '5%',
      top: 'center',
      itemGap: 22,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 12
      },
      formatter: (name: string) => {
        const data = [
          { value: 420, name: '应用端', percent: '42%' },
          { value: 310, name: '政务钉钉', percent: '31%' },
          { value: 180, name: '政务微信', percent: '18%' },
          { value: 90, name: '异构系统', percent: '9%' },
        ];
        const item = data.find(i => i.name === name);
        return `${name}  ${item?.percent}`;
      }
    },
    series: [
      {
        name: '渠道访问量',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['28%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.2)'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 420, name: '应用端' },
          { value: 310, name: '政务钉钉' },
          { value: 180, name: '政务微信' },
          { value: 90, name: '异构系统' },
        ],
      },
    ],
  };

  // 顶部统计卡片数据
  const topStats = [
    {
      icon: <CalendarOutlined style={{ fontSize: 32, color: '#1890ff' }} />,
      value: todayRequests,
      title: '今日总请求次数',
      unit: '次',
    },
    {
      icon: <InfoCircleOutlined style={{ fontSize: 32, color: '#40a9ff' }} />,
      value: dashboardStats.totalAgents || 0,
      title: '智能体总数',
    },
    {
      icon: <CalendarOutlined style={{ fontSize: 32, color: '#52c41a' }} />,
      value: 10000 - (dashboardStats.totalApiCalls || 0),
      title: '可用数量',
    },
    {
      icon: <ExclamationCircleOutlined style={{ fontSize: 32, color: '#faad14' }} />,
      value: dashboardStats.totalAlerts || 0,
      title: '总警告数',
    },
    {
      icon: <ExclamationCircleOutlined style={{ fontSize: 32, color: '#ff4d4f' }} />,
      value: dashboardStats.totalErrors || 0,
      title: '总错误数',
    },
  ];

  // 处理日期变化
  const handleDateChange = (date: dayjs.Dayjs | null) => {
    if (date) {
      setSelectedDate(date.format('YYYY-MM-DD'));
    }
  };

  // 处理月份变化
  const handleMonthChange = (date: dayjs.Dayjs | null) => {
    if (date) {
      const year = date.year();
      const month = date.month() + 1;
      setSelectedMonth(`${year}-${month}`);
    }
  };

  // 渲染时间选择器
  const renderTimeSelector = () => {
    switch (failTab) {
      case 'day':
        return (
          <DatePicker
            value={dayjs(selectedDate)}
            onChange={handleDateChange}
            format="YYYY-MM-DD"
            style={{ width: '83%' }}
            locale={locale}
          />
        );
      case 'week':
        return (
          <WeekPicker
            value={selectedWeek}
            onChange={handleWeekChange}
          />
        );
      case 'month':
        return (
          <DatePicker
            value={dayjs(selectedMonth)}
            onChange={handleMonthChange}
            picker="month"
            format="YYYY年M月"
            style={{ width: '83%' }}
            locale={locale}
          />
        );
      default:
        return null;
    }
  };

  return (
    <div className={styles['dv-container']}>
      <div className={styles['dv-main']}>
        {/* 左栏 */}
        <div className={styles['dv-left']}>
          {/* 上组：统计卡片 */}
          <div className={styles['dv-left-top']}>
            <Card bordered={false} className={styles['dv-card']}>
              <div className={styles['dv-stat-main']}>
                {topStats[0].icon}
                <div>
                  <Statistic value={topStats[0].value} valueStyle={{ fontSize: 28, fontWeight: 700 }} suffix={topStats[0].unit} />
                  <div className={styles['dv-stat-title']}>{topStats[0].title}</div>
                </div>
              </div>
            </Card>
          </div>
          {/* 下组：服务请求失败统计 + 用户智能平台峰值 */}
          <div className={styles['dv-left-bottom']}>
            <Card bordered={false} className={styles['dv-card']} style={{ height: '40%' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className={styles['dv-title']}>服务请求统计</span>
                  <Tabs activeKey={failTab} onChange={handleTabChange} size="small">
                    <TabPane tab="日" key="day" />
                    <TabPane tab="周" key="week" />
                    <TabPane tab="月" key="month" />
                  </Tabs>
                </div>
                <div className={styles['dv-time-selector']}>
                  <span style={{ color: '#666' }}>日期：</span>
                  {renderTimeSelector()}
                </div>
              </div>
              <Divider style={{ margin: '12px 0' }} />
              <Spin spinning={chartLoading}>
                <div 
                  style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    gap: 12, 
                    justifyContent: 'center', 
                    height: '80px',
                    cursor: 'pointer'
                  }}
                  onClick={handleFailureCountClick}
                >
                  <CalendarOutlined style={{ color: '#52c41a', fontSize: 32 }} />
                  <span style={{ fontSize: 32, fontWeight: 700, color: '#000' }}>{failureCount}</span>
                  <span style={{ color: '#888', fontSize: 18 }}>次</span>
                </div>
              </Spin>
            </Card>
            <Card bordered={false} className={styles['dv-card']} style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className={styles['dv-title']}>用户智能平台峰值</div>
              <Spin spinning={chartLoading}>
                <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' , height: '260px'}}>
                  <ReactECharts 
                    option={getUserPeakOption()} 
                    style={{ flex: 1, height: '100%', width: '100%' }}
                    opts={{ renderer: 'svg' }}
                  />
                </div>
              </Spin>
            </Card>
          </div>
        </div>
        {/* 中栏 */}
        <div className={styles['dv-middle']}>
          {/* 上组：顶部四个统计卡片 */}
          <div className={styles['dv-middle-top']}>
            {topStats.slice(1).map((item, idx) => (
              <Card 
                bordered={false} 
                key={item.title} 
                className={styles['dv-card']}
                onClick={item.title === '总错误数' ? handleTotalErrorsClick : undefined}
                style={item.title === '总错误数' ? { cursor: 'pointer' } : undefined}
              >
                <div className={styles['dv-stat-main']}>
                  {item.icon}
                  <div>
                    <Statistic value={item.value} valueStyle={{ fontSize: 22, fontWeight: 700 }} />
                    <div className={styles['dv-stat-title']}>{item.title}</div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
          {/* 下组：服务器资源监控 + 大模型稳定性监控 */}
          <div className={styles['dv-middle-bottom']}>
            <Card bordered={false} className={styles['dv-card']} style={{ height: '40%' }}>
              <div className={styles['dv-title']}>服务器资源监控</div>
              <div style={{ display: 'flex', gap: 16, height: '100px' }}>
                {resourceData.map((item, idx) => (
                  <div key={item.name} style={{ flex: 1, textAlign: 'center' }}>
                    <ReactECharts
                      style={{ height: '100%' }}
                      option={{
                        series: [
                          {
                            type: 'gauge',
                            startAngle: 180,
                            endAngle: 0,
                            min: 0,
                            max: 100,
                            progress: { show: true, width: 12 },
                            axisLine: { lineStyle: { width: 12, color: [[1, item.color]] } },
                            pointer: { show: false },
                            axisTick: { show: false },
                            splitLine: { show: false },
                            axisLabel: { show: false },
                            detail: {
                              valueAnimation: true,
                              fontSize: 20,
                              color: item.color,
                              offsetCenter: [0, '45%'],
                              formatter: item.notConnected ? '未接入' : '{value}%'
                            },
                            data: [{ value: item.value }],
                          },
                        ],
                      }}
                    />
                    <div style={{ color: '#888', fontSize: 14, marginTop: '4px' }}>{item.name}</div>
                  </div>
                ))}
              </div>
            </Card>
            <Card bordered={false} className={styles['dv-card']} style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className={styles['dv-title']}>大模型稳定性监控</div>
              <Spin spinning={chartLoading}>
                <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', height: '260px' }}>
                  <ReactECharts 
                    option={modelOption} 
                    style={{ flex: 1, height: '100%', width: '100%' }}
                    opts={{ renderer: 'svg' }}
                    onEvents={{
                      click: handleChartClick
                    }}
                  />
                </div>
              </Spin>
            </Card>
          </div>
        </div>
        {/* 右栏 */}
        <div className={styles['dv-right']}>
          {/* 上组：智能体监控 */}
          <div className={styles['dv-right-top']}>
            <Card bordered={false} className={styles['dv-card']} style={{ minHeight: 220, height: '100%' }}>
              <div className={styles['dv-title']}>智能体监控</div>
              <div className={styles['dv-agent-list']}>
                <div className={styles['dv-agent-header']}>
                  <span className={styles['dv-agent-link']} style={{ width: '40%', fontWeight: 'bold', color: '#000' }}>智能体名称</span>
                  <span className={styles['dv-agent-value']} style={{ width: '30%', fontWeight: 'bold', color: '#000' }}>使用量</span>
                  <span className={styles['dv-agent-percent']} style={{ width: '30%', fontWeight: 'bold', color: '#000' }}>占比</span>
                </div>
                {calculateAgentPercentages().map(item => (
                  <div key={item.name} className={styles['dv-agent-item']}>
                    <a className={styles['dv-agent-link']} style={{ width: '40%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }} title={item.name}>
                      {item.name.length > 6 ? item.name.substring(0, 6) + '...' : item.name}
                    </a>
                    <span className={styles['dv-agent-value']} style={{ width: '30%' }}>{item.value}</span>
                    <span className={styles['dv-agent-percent']} style={{ width: '30%' }}>{item.percent}%</span>
                  </div>
                ))}
              </div>
            </Card>
          </div>
          {/* 下组：使用渠道分析 */}
          <Card bordered={false} className={styles['dv-card']} style={{ flex: 1, minHeight: 300 }}>
            <div className={styles['dv-title']}>使用渠道分析</div>
            <ReactECharts option={channelOption} style={{ height: 240 }} />
          </Card>
        </div>
      </div>

      <ChatLogModal
        visible={chatLogModalVisible}
        onClose={() => setChatLogModalVisible(false)}
        initialStartTime={selectedTimeRange[0]}
        initialEndTime={selectedTimeRange[1]}
        initialStatus={selectedStatus}
      />
    </div>
  );
};

export default DataVisualization;
